import { useECharts } from '@/hooks/useECharts';
import { EChartsOption } from 'echarts/types/dist/shared.d.ts';
import { useEffect } from 'react';
// ts
import type { BleedType } from '../typing';
interface BarChartProps {
  bleedData: BleedType.StateType;
}

export const LineChart = ({ bleedData }: BarChartProps) => {
  const { chartRef: barRef, chartInstanceRef: barChart } = useECharts();
  const { xAxisData, seriesData1, seriesData2 } = bleedData;

  useEffect(() => {
    barChart.current?.setOption({
      grid: {
        left: '4%',
        right: '5%',
        bottom: '3%',
        containLabel: true,
      },
      legend: {
        data: ['基准值(放血池)', '放血池', '基准值(暂养池)', '暂养池'],
        itemWidth: 7,
        itemHeight: 7,
        icon: 'circle',
        itemStyle: {
          // color: '#697682',
        },
        textStyle: {
          color: '#697682',
        },
      },
      tooltip: {
        trigger: 'axis', // 触发类型。
        backgroundColor: '#233346', // 背景色
        borderWidth: 0,
        axisPointer: {
          // 指示器类型。
          type: 'line',
          crossStyle: {
            color: '#fff', // 线的颜色。
          },
        },
        textStyle: {
          color: '#fff',
        },
      },
      xAxis: [
        {
          type: 'category',
          data: xAxisData,
          // boundaryGap: false, // false时从0刻度开始
          axisLine: {
            // 坐标轴轴线
            show: false,
          },
          axisTick: {
            // 坐标轴刻度
            show: false,
          },
          axisLabel: {
            // 坐标轴刻度标签的相关设置
            color: '#697682',
            fontSize: '.12rem',
            // rotate: 45, // 取值范围[-90, 90]
          },
          axisPointer: {
            type: 'shadow',
          },
        },
      ],
      yAxis: [
        {
          name: '单位：℃',
          type: 'value',
          // interval: 20, 值之间的间距
          axisLabel: {
            color: '#697682',
            formatter: '{value}',
            // margin: 10 // 坐标轴文字距离坐标轴的距离
          },
          splitLine: {
            // 坐标轴在 grid 区域中的分隔线。
            lineStyle: {
              type: 'dotted',
              color: ['rgba(130, 144, 157, 0.18)'],
            },
          },
        },
        {
          type: 'value',
          // min: 80,
          axisLabel: {
            formatter: '{value}',
          },
          splitLine: {
            show: false,
            // 坐标轴在 grid 区域中的分隔线。
            lineStyle: {
              type: 'dotted',
              color: ['rgba(130, 144, 157, 0.18)'],
            },
          },
        },
      ],
      series: [
        {
          name: '基准值(放血池)',
          type: 'line',
          smooth: true,
          showSymbol: false,
          tooltip: {
            valueFormatter: function (value) {
              return value as number;
            },
          },
          itemStyle: {
            color: '#FA5151',
          },
          lineStyle: {
            type: 'dotted',
          },
          data: seriesData1[1] && seriesData1[1].data,
        },
        {
          name: '放血池',
          type: 'line',
          smooth: true,
          showSymbol: false,
          tooltip: {
            valueFormatter: function (value) {
              return value as number;
            },
          },
          itemStyle: {
            color: '#71F0A2',
          },
          data: seriesData1[0] && seriesData1[0].data,
        },
        {
          name: '基准值(暂养池)',
          type: 'line',
          smooth: true,
          showSymbol: false,
          yAxisIndex: 1, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
          tooltip: {
            valueFormatter: function (value) {
              return value as number;
            },
          },
          itemStyle: {
            color: '#ffaa08',
          },
          lineStyle: {
            type: 'dotted',
          },
          data: seriesData2[1] && seriesData2[1].data,
        },
        {
          name: '暂养池',
          type: 'line',
          smooth: true,
          showSymbol: false,
          yAxisIndex: 1, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
          tooltip: {
            valueFormatter: function (value) {
              return value as number;
            },
          },
          itemStyle: {
            color: '#2FB3FF',
          },
          data: seriesData2[0] && seriesData2[0].data,
        },
      ],
    } as EChartsOption);
  }, [barChart, seriesData1, xAxisData]);

  return <div style={{ height: '100%' }} ref={barRef}></div>;
};
